<template>
  <p-card :bordered="false">
    <div class="box-title">工单条码反展</div>
    <div class="box-params">
      <p-form-model
        ref="workOrderForm"
        :model="workOrderForm"
        :rules="workOrderRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-row :gutter="24">
          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-form-model-item
              ref="workOrderIndex"
              label="生产工单"
              prop="workOrderIndex"
            >
              <p-select
                style="width: 180px"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"                  
                v-model="workOrderForm.workOrderIndex"
                @change="workOrderSelectedChange"
              >
                <p-select-option
                  :value="index"
                  v-for="(item, index) in workOrderList"
                  :key="index"
                  >{{ item.productionno }}</p-select-option
                >
              </p-select>
            </p-form-model-item>
          </p-col>

          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="mcode" label="产品编码">
              <p-input disabled :value="workOrderForm.mcode"></p-input>
            </p-form-model-item>
          </p-col>

          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="mname" label="产品名称">
              <p-input disabled :value="workOrderForm.mname"></p-input>
            </p-form-model-item>
          </p-col>

          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="barcodeRule" label="条码规则">
              <p-input disabled :value="workOrderForm.barcodeRule"></p-input>
            </p-form-model-item>
          </p-col>

          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="qty" label="工单数量">
              <p-input disabled :value="workOrderForm.qty"></p-input>
            </p-form-model-item>
          </p-col>

          <!-- 条码规则现在不需要，以后可能要需要， 如果需要的时候，是要选择生产工单已经被使用过的规则 -->
          <!-- <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="barcodeRuleId" label="条码规则" prop="barcodeRuleId">
              <p-select v-model="workOrderForm.barcodeRuleId" @change="handleChange">
                <p-select-option
                  :value="item.id"
                  v-for="(item, index) in mesBcRuleList"
                  :key="index"
                >{{item.ruleName}}
                </p-select-option>
              </p-select>
            </p-form-model-item>
          </p-col>           -->

          <p-col :xl="6" :lg="7" :md="8" :sm="24" style="padding-bottom: 20px">
            <p-button type="primary" @click="getMesBcProDetail(0)"
              >查询</p-button
            >
          </p-col>

          <p-col :xl="4" :lg="7" :md="8" :sm="24" style="padding-bottom: 20px">
            <p-button type="primary" @click="showModal(0)">un-Start</p-button>
          </p-col>
        </p-row>
      </p-form-model>
    </div>
    <div class="box-title">零散条码反展</div>
    <div class="box-params">
      <p-form-model
        ref="scatteredRules"
        :model="scatteredForm"
        :rules="scatteredRules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <p-row :gutter="24">
          <p-col :xl="8" :lg="7" :md="8" :sm="24">
            <p-form-model-item
              ref="barcodeProduceNo"
              label="条码生成编码"
              prop="barcodeProduceNo"
            >
              <p-select
                show-search
                v-model="scatteredForm.scatteredIndex"
                style="width: 220px"
                option-filter-prop="children"
                :filter-option="filterOption"                
                @change="scatteredSelectedChange"
              >
                <p-select-option
                  :value="index"
                  v-for="(item, index) in noReverseScatteredProduceNoList"
                  :key="index"
                  >{{ item.produceNo }}</p-select-option
                >
              </p-select>
            </p-form-model-item>
          </p-col>

          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-form-model-item ref="qty" label="数量">
              <p-input disabled :value="scatteredForm.qty"></p-input>
            </p-form-model-item>
          </p-col>

          <p-col :xl="6" :lg="7" :md="8" :sm="24">
            <p-button type="primary" @click="getMesBcProDetail(1)"
              >查询</p-button
            >
          </p-col>

          <p-col :xl="4" :lg="7" :md="8" :sm="24">
            <p-button type="primary" @click="showModal(1)">un-Start</p-button>
          </p-col>
        </p-row>
      </p-form-model>
    </div>
    <div class="box-title">条码明细</div>
    <div class="box-table">
      <table border="1">
        <tr v-for="(item, index) in codeDetail" :key="index">
          <td v-for="(ele, i) in item" :key="i">
            <p-tooltip placement="top">
              <template slot="title" v-if="ele.mac">
                <span>{{ ele.mac }}</span>
              </template>
              <span class="box-table-text">{{ ele.barcode }}</span>
            </p-tooltip>
          </td>
        </tr>
      </table>
    </div>

    <p-modal
      title="'提示'"
      :visible="visible"
      :confirm-loading="confirmLoading"
      @ok="DoCodeReverse"
      @cancel="handleCancel"
    >
      <p>认条码是否反展？</p>
    </p-modal>
  </p-card>
</template>

<script type="text/javascript">
import { postAction, getAction, putAction, deleteAction } from "@/api/manage";

export default {
  data() {
    return {
      visible: false,
      confirmLoading: false,
      labelCol: { span: 10 },
      wrapperCol: { span: 14 },
      workOrderList: [],
      other: "",
      codeDetail: [],
      workOrderForm: {
        workOrderIndex: "",
        mcode: "", // 产品编码
        mname: "", // 产品名称
        qty: "", // 工单数量
        barcodeRuleId: "", // 规则
        barcodeRule: "", // 规则
      },
      mesBcRuleList: [],
      scatteredForm: {
        scatteredIndex: "",
        barcodeProduceNo: "",
        qty: "", // 数量
      },
      workOrderRules: {
        workOrderIndex: [
          { required: true, message: "请选择生产工单", trigger: "blur" },
        ],
        barcodeRuleId: [
          { required: true, message: "请选择条码规则", trigger: "blur" },
        ],
      },
      scatteredRules: {
        barcodeProduceNo: [
          { required: true, message: "请选择条码生成编码", trigger: "blur" },
        ],
      },
      noReverseScatteredProduceNoList: [],
      reverseState: "",
      url: {
        mesBcRuleList: "/mes-code/mesBcRule/allByCodeType",
        workOrderList: "/mes-code/mesBcProduce/getBcProNoList", // 生成工单列表
        start: "/mes-code/mesBcProduce/codeProduce", //生成条码
        mesBcProDetail: "/mes-code/mesBcPro/detail", // 查询条码明细
        codeReverse: "/mes-code/mesBcProduce/codeReverse", // 条码反展
        noReverseScatteredProduceNo: "/mes-code/mesBcProduce/getBcProNoList", // 获取未反展零散条码生成编码列表
      },
    };
  },

  activated() {
    this.getNoReverseScatteredProduceNo();
    this.getWorkOrderList();
  },
  mounted() {},
  methods: {
    // 下拉框筛选
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
      );
    },

    // 生产工单选择事件
    workOrderSelectedChange(index) {
      const workOrderList = this.workOrderList[index];
      this.workOrderForm.mcode = workOrderList.mcode;
      this.workOrderForm.mname = workOrderList.mname;
      this.workOrderForm.qty = workOrderList.qty;
      this.workOrderForm.barcodeRule = workOrderList.barcodeRule;
      this.getMesBcRuleList(workOrderList.mcode);
    },

    // 零散条码的条码生成编码选择事件
    scatteredSelectedChange(index) {
      const scatteredList = this.noReverseScatteredProduceNoList[index];
      this.scatteredForm.barcodeProduceNo = scatteredList.produceNo;
      this.scatteredForm.qty = scatteredList.qty;
    },

    // 获取条码规则列表
    getMesBcRuleList(mcode) {
      const params = {
        codeType: 0,
        mcode,
      };
      getAction(this.url.mesBcRuleList, params).then((res) => {
        console.log("res", res);
        if (res.success) {
          this.mesBcRuleList = res.data;
        }
      });
    },

    // 获取未反展零散条码生成编码列表
    getNoReverseScatteredProduceNo() {
      const params = {
        barcodeType: 1,
      };
      getAction(this.url.noReverseScatteredProduceNo, params).then((res) => {
        if (res.success) {
          this.noReverseScatteredProduceNoList = res.data;
        }
      });
    },

    // 查询对应条码
    getMesBcProDetail(barcodeType) {
      // 查询工单条码
      if (barcodeType == 0) {
        this.$refs.workOrderForm.validate((valid) => {
          if (valid) {
            const workOrderInfo = this.workOrderList[
              this.workOrderForm.workOrderIndex
            ];
            const params = {
              barcodeType,
              productionno: workOrderInfo.productionno,
            };
            getAction(this.url.mesBcProDetail, params).then((res) => {
              if (res.success) {
                const num = 5;
                let arr = [];
                res.data.forEach((val, index) => {
                  let divideFlag = Math.floor(index / num);
                  arr[divideFlag] || (arr[divideFlag] = []);
                  arr[divideFlag].push(val);
                });
                this.codeDetail = arr;
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }

      // 查询零散条码
      if (barcodeType == 1) {
        this.$refs.scatteredRules.validate((valid) => {
          if (valid) {
            const params = {
              barcodeType,
              barcodeProduceNo: this.scatteredForm.barcodeProduceNo,
            };
            getAction(this.url.mesBcProDetail, params).then((res) => {
              if (res.success) {
                const num = 5;
                let arr = [];
                res.data.forEach((val, index) => {
                  let divideFlag = Math.floor(index / num);
                  arr[divideFlag] || (arr[divideFlag] = []);
                  arr[divideFlag].push(val);
                });
                this.codeDetail = arr;
              }
            });
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      }
    },

    // 反转
    DoCodeReverse() {
      let params;
      if (this.reverseState == 0) {
        const workOrderInfo = this.workOrderList[
          this.workOrderForm.workOrderIndex
        ];
        params = {
          barcodeType: this.reverseState,
          productionno: workOrderInfo.productionno,
        };
      }

      if (this.reverseState == 1) {
        params = {
          barcodeType: this.reverseState,
          barcodeProduceNo: this.scatteredForm.barcodeProduceNo,
        };
      }

      putAction(this.url.codeReverse, params).then((res) => {
        if (res.success) {
          this.$message.success("反转成功");
          this.codeDetail = [];
          if (this.reverseState == 0) {
            this.getWorkOrderList();
            this.workOrderForm.workOrderIndex = "";
          }
          if (this.reverseState == 1) {
            this.getNoReverseScatteredProduceNo();
            this.scatteredForm.barcodeProduceNo = "";
          }
        } else {
          this.$message.warning(res.msg);
        }
        this.visible = false;
      });
    },

    // 获取生成工单列表
    getWorkOrderList() {
      // const params = {
      //   generatePrint: 1,
      //   isPublic: 1,
      // };
      // getAction(this.url.workOrderList, params).then((res) => {
      //   if (res.success) {
      //     this.workOrderList = res.data;
      //   }
      // });

      const params = {
        barcodeType: 0,
      };
      getAction(this.url.workOrderList, params).then((res) => {
        if (res.success) {
          this.workOrderList = res.data;
        }
      });
    },

    showModal(reverseState) {
      this.visible = true;
      this.reverseState = reverseState;
    },

    handleCancel(e) {
      console.log("Clicked cancel button");
      this.visible = false;
    },
  },
  components: {},
};
</script>
<style scoped>
@import "~@assets/less/common.less";
</style>
<style lang="less" scoped>
.box-title {
  height: 40px;
  line-height: 40px;
  border-radius: 4px;
  padding-left: 20px;
  background-color: #e6f7ff;
  border: 1px solid #91d5ff;
}
.box-params {
  padding-top: 20px;
}
.box-table {
  padding-top: 20px;
  table {
    width: 100%;
    tr {
      td {
        height: 40px;
        line-height: 40px;
        text-align: center;
        width: 20%;
        .box-table-text {
          cursor: pointer;
        }
      }
    }
  }
}
.poros-form .poros-form-item {
  min-height: 60px;
}
</style>
